<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>BootStrap Table使用</title>

    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/bootstrap-table.js}"></script>
    <script th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
    <script th:src="@{/js/guonl.js}"></script>
    <script th:src="@{/js/bootstrap-table-page-jump-to.min.js}"></script>

    <link th:href="@{/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap-table.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap-table-page-jump-to.min.css}" rel="stylesheet"/>

</head>
<body onload="guonl_init();">
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1" for="txt_search_status">状态</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_status">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="taskInfo"></table>


        <!--
            modal 用来把 <div> 的内容识别为模态框。
            fade 当模态框被切换时，它会引起内容淡入淡出。
            aria-labelledby 引用模态框的标题。
            aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止
            modal-header 模态框头部样式
            class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。

        -->

        <div class="modal fade"id="addModal"tabindex="-1"role="dialog"aria-labelledby="addModalLabel"data-backdrop="false">
                <div class="modal-dialog"role="document"style="margin-top:5%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button"class="close"data-dismiss="modal"aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title"id="addModalLabel">新增用户信息</h4>
                        </div>
                        <div class="modal-body">
                            <form id="add_form_modal"class="form-horizontal">
                                <input type="hidden"name="userId"class="form-control"id="userId">
                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <label class="control-label"for="userName">用户名</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text"name="userName"class="form-control"id="userName">
                                    </div>
<!--                                    <label class="err-info-modal"></label>-->
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <label class="control-label"for="password">密码</label>
                                    </div>

                                    <div class="col-sm-9">
                                        <input type="text"name="password"class="form-control"id="password">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <label class="control-label"for="phone">电话</label>
                                    </div>

                                    <div class="col-sm-9">
                                        <input type="text"name="phone"class="form-control"id="phone">
                                    </div>
<!--                                    <label class="err-info-modal"></label>-->
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <label class="control-label"for="departmentname">部门</label>
                                    </div>

                                    <div class="col-sm-9">
                                        <input type="text"name="departmentname"class="form-control"id="departmentname">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <label class="control-label"for="status">状态</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text"name="status"class="form-control"id="status">
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button"class="btn btn-default btn_reset_c"data-dismiss="modal"><span
                                    class="glyphicon glyphicon-remove"aria-hidden="true"></span>取消
                            </button>
                            <button type="button"id="btn_add_reset"class="btn btn-default btn_reset_c">
                                <span class="glyphicon glyphicon-share-alt"aria-hidden="true"></span>重置
                            </button>
                            <button type="button"id="btn_add_submit"class="btn btn-primary"data-dismiss="modal"><span
                                    class="glyphicon glyphicon-floppy-disk"aria-hidden="true"></span>保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>

    </div>
</body>
</html>